<script setup lang="ts">
import { RandomTestingStoreKey, RandomTestingStore } from './store'
import MobilePage from './cmpt/MobilePage/MobilePage.vue'
import PcPage from './cmpt/PcPage/PcPage.vue'
import { provide } from 'vue'
import ChangeClassificationForm from './cmpt/ChangeClassificationForm/ChangeClassificationForm.vue'
import PageConfigForm from './cmpt/PageConfigForm/PageConfigForm.vue'
import { useClassification } from '../IssueStorage/hooks/useClassification'
import QuestionEditor from '../IssueStorage/QuestionEditor.vue'

const rootStore = new RandomTestingStore()
const { plainStore, breakpointStore, classificationStore, interviewQuestionsEditFormStore } =
  rootStore
const {
  changeClassificationModal,
  onChangeClassificationOk,
  onChangeClassificationCancel,
  changeClassificationFormRef,
  settingDrawer,
  onCloseSettingDrawer,
} = plainStore
const { isPc } = breakpointStore
const { tree } = classificationStore
const {
  modal: editModal,
  loading: editLoading,
  onOk: onEditOk,
  onCancel: onEditCancel,
  formRef: editFormRef,
} = interviewQuestionsEditFormStore
const useClassificationInstance = useClassification()

provide(RandomTestingStoreKey, rootStore)
rootStore.init()
</script>

<template>
  <!-- <template v-if="isPc"> -->
  <PcPage></PcPage>
  <!-- </template>
  <template v-else>
    <MobilePage></MobilePage>
  </template> -->
  <AModal
    v-model:open="changeClassificationModal"
    :title="`切换题库`"
    @ok="onChangeClassificationOk"
    @cancel="onChangeClassificationCancel"
  >
    <ChangeClassificationForm
      ref="changeClassificationFormRef"
      :classification-tree="tree"
    ></ChangeClassificationForm>
  </AModal>
  <ADrawer title="页面配置" :open="settingDrawer" :closable="!isPc" @close="onCloseSettingDrawer">
    <PageConfigForm></PageConfigForm>
  </ADrawer>

  <AModal
    width="90%"
    v-model:open="editModal"
    :title="`修改题目`"
    :confirm-loading="editLoading"
    @ok="onEditOk"
    @cancel="onEditCancel"
  >
    <ASpin wrapperClassName="editor-modal-spin-wrapper" :spinning="editLoading">
      <QuestionEditor
        editor-id="testEditEditor"
        ref="editFormRef"
        :use-classification-instance="useClassificationInstance"
        disabled-class
      ></QuestionEditor>
    </ASpin>
  </AModal>
</template>

<style less="less" scoped></style>
